<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <select name="" id="level">
        <option value="xiaoqu">小区</option>
        <option value="cun">村</option>
        <option value="xiang">乡</option>
        <option value="xian">县</option>
        <option value="shi">市</option>
        <option value="sheng">省</option>
    </select>
    <div id="map" style="height: 600px"></div>
    <script>
        // let ip = 'localhost:3000';
        let ip = '6ql20nip.ipyingshe.net';
        let level='cun';
        let field='f176';
        let filter="code like '370102%'";
        let labels = [
            'Not significant',
            'High-High',
            'Low-Low',
            'High-Low',
            'Low-High',
            'Undefined',
            'Isolated'
        ];
        let colorcase = [
            'case',
            ['==', ['get', 'cluster'], 0],
            '#eeeeee',
            ['==', ['get', 'cluster'], 1],
            '#FF0000',
            ['==', ['get', 'cluster'], 2],
            '#0000FF',
            ['==', ['get', 'cluster'], 3],
            '#a7adf9',
            ['==', ['get', 'cluster'], 4],
            '#f4ada8',
            'black'
        ];
        mapboxgl.accessToken =
            "pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ";
        const map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/streets-v11", // style URL
            center: [117.125829, 36.656704], // starting position [lng, lat]
            zoom: 12, // starting zoom
        });

        map.addControl(
            new MapboxLanguage({
                defaultLanguage: "zh-Hans",
            })
        );

        map.on("load", function () {
            $.getJSON(`http://${ip}/spatialCluster`, {
                level: level, field: field,filter
            }, function (res) {
                map.addSource("bj", {
                    type: "geojson",
                    data: res
                });
                map.addLayer({
                    id: `fill_bj`,
                    type: "fill",
                    source: `bj`,
                    paint: {
                        "fill-color": colorcase,
                        'fill-outline-color': "black"
                    }
                });
            })

        });
    </script>
</body>

</html>